<template>
	<view class="item_detail_box box_shadow" :style="!isUp?hide:show">
		<pull-up :isUp.sync='isUp'></pull-up>
		<!-- <view class="content"> -->
		<scroll-view class="content" :scroll-y="isUp" :scroll-top="scrollTop" @scroll='handleScroll'> 
			<view class="detail_head">
				<J-skeleton
				  :loading="skeletonLoading"
				  :avatarSize="'82rpx'"
				  :row="2"
				  showTitle
				  animates
				  avatarShape='square'
				  >
					<monitor-item :monitorData="monitorDetail" class="mapDetail"></monitor-item>
				</J-skeleton>
				<!-- <view class="alarmDesc padding_right150">{{monitorDetail.alarmDesc}}</view>
				<view class="padding_right150">
					<text>1.6km</text>|<text>{{monitorDetail.alarmRoad}}</text>
					<text>{{monitorDetail.alarmRoad}}</text>
				</view>
				<view class="flex_between_row">
					<view class="monitorValue" :class="['alarmLevel'+monitorDetail.alarmLevel]">{{monitorDetail.monitorValue}}<text>{{monitorDetail.alarmLevel}}</text></view>
					<view>{{monitorDetail.monitorTime}}</view>
				</view> -->
	
			</view>
			<view class="removeAlarm_btn_box flex_between_row">
				<view class="btn_removeAlarm alarm_removed" v-if="monitorDetail.ravelflag === 1">报警已解除</view>
				<view class="btn_removeAlarm" v-else @click="removeAlarm">解除报警</view>
				<view class="btn_removeAlarm alarm_removed"  @click="openLocation">到这去</view>
			</view>
			<!-- <scroll-view scroll-y="true" v-show="isUp"> -->
				<view class="comm_box flex_column">
					<view class="tit_box flex_between_row" @click="enterMonitor">
						<view>监测曲线</view>
						<image src="../../static/img/map/back_disabled.png" mode=""></image>
					</view>
					<view class="con_box" v-show="monitorDetail.historyCurveData.length">
						<view class="chart_info flex_between_row">
							<view class="flex_between_column">
								<text>{{monitorDetail.historyCurveData[0].maxValue}}%VOL</text>
								<text>最高值</text>
							</view>
							<view class="flex_between_column">
								<text>{{monitorDetail.historyCurveData[0].maxTime}}</text>
								<text>发生时间</text>
							</view>
						</view>
						<view class="chartBox" ref='chart'>
							<monitor-chart-landscape2 
							:chartData='chartData' 
							v-if='chartData!==null'
							:showDateTimeBox='false'></monitor-chart-landscape2>
							<!-- <monitor-chart :chartData='chartData' v-if='chartData !==null'></monitor-chart> -->
						</view>
					</view>
					<view class="no_data" v-if="!monitorDetail.historyCurveData.length">暂无数据</view>
				</view>
				<view class="comm_box flex_column">
					<view class="tit_box flex_between_row">
						<view>当前设备</view>
						<view class="indicators" :class="{cur:showIndicators}" @click="showIndicators = !showIndicators">
							<text>设备运行</text>
							<image src="../../static/img/map/back_disabled.png" mode=""></image>
						</view>
					</view>
					<view class="con_box">
						<view class="device_info_row">
							<text>设备名称</text>
							<text>{{monitorDetail.equipmentName}}</text>
						</view>
						<view class="device_info_row">
							<text>设备编码</text>
							<text>{{monitorDetail.equipmentCode}}</text>
						</view>
						<view class="device_info_row">
							<text>安装日期</text>
							<text>{{monitorDetail.installTime}}</text>
						</view>
						<view class="device_info_row">
							<text>设备厂商</text>
							<text>{{monitorDetail.manufacturer}}</text>
						</view>
						<view class="device_info_row">
							<text>所属对象</text>
							<text>{{monitorDetail.equipObject}}</text>
						</view>
					<!-- 	<view class="device_info_row">
							<text>所在节点</text>
							<text>{{monitorDetail.equipNode}}</text>
						</view>
						<view class="device_info_row">
							<text>安装位置</text>
							<text>{{monitorDetail.installPos}}</text>
						</view> -->
						<view class="indicators" v-show="showIndicators">
							<indicators-item :equipmentCode='monitorDetail.equipmentCode'></indicators-item>
						</view>
					</view>
				</view>
				<view class="comm_box flex_column">
					<view class="tit_box flex_between_row">
						<view>历史报警</view>
					</view>
					<view class="con_box">
					
						<view class="history_alarm_box" v-for="item in monitorDetail.historyAlarm" :key='item.alarmId'>
							 <image class="levelImage" :src="'../../static/img/alarm/alarm'+item.maxLevel+'.png'"></image>
							 <view>
								 
								 <view>
									 <text class="tit"> {{item.alarmDesc}}</text>
										<text class="subTit">{{item.maxTime}}</text>
								 </view>
								 <view class="device_info_row">
								 	<text>报警开始时间:</text>
								 	<text>{{item.startTime}}</text>
								 </view>
								 <view class="device_info_row">
								 	<text>报警结束时间:</text>
								 	<text>{{item.endTime}}</text>
								 </view>
								 <view class="device_info_row">
								 	<text>最高报警级别:</text>
								 	<text>{{item.maxLevel}}级</text>
								 </view>
								 
								 <view class="device_info_row">
								 	<text>最高报警浓度:</text>
								 	<text>{{item.alarmMaxValue}}</text>
								 </view>
							 </view>
							
						</view>
					</view>
				</view>
		</scroll-view>
	</view>
</template>

<script>
let vm = this
export default {
	data() {
		return {
			monitorDetail:null,
			alarmId:'',
			isUp:false ,//默认收起状态
			// show:"height: 1000rpx;top:calc(100vh - 1000rpx)",
			show:"height: 100vh;top:16rpx",
			hide:"height: 450rpx;top:calc(100vh - 450rpx)",
			showIndicators:false,
			chartData:null,
			scrollTop:0,
			oldScrollTop:0,
			skeletonLoading:true
		};
	},
	mounted() {
		vm = this;
		uni.$on('relieveAlarmSuccess', () => {
			vm.$set(vm.monitorDetail, 'ravelFlag', '1')
		});
	},
	watch:{
		isUp(newVal){
			if(newVal){
				uni.getStorage({
					key:'monitorDetailData',
					success(res){
						vm.chartData = res.data
					}
				})
			}else{
				vm.scrollTop = Math.random();  
			}
		}
	},
	methods: {
		init(){
			//console.log('alarmDetailInfoFn ---')
			let vm = this
			uni.getStorage({
			    key: 'monitorDetail',
			    success(res) {
					vm.alarmId = res.data.alarmId || res.data.alarmid
					if(!vm.alarmId){
						return false
					}
					vm.alarmDetailInfoFn()
					
					vm.showIndicators = false
			    }
			});
		},
		handleScroll(e){
			if(e.detail.scrollTop < -150){
				vm.isUp = false
			}
		},
		openLocation(){
			uni.openLocation({
				latitude:this.monitorDetail.latitude,
				longitude:this.monitorDetail.longtitude,
				name:this.monitorDetail.alarmPoint,
				address:this.monitorDetail.alarmRoad
			})
		},
		removeAlarm(){
			if(vm.monitorDetail.ravelflag === 1){
				return false
			}
			let id = vm.alarmId
			uni.getStorage({
				key:'userinfo',
				success(){
					uni.navigateTo({
						url:`/pages/views/removeAlarm/removeAlarm?id=${id}`
					})
				},
				fail() {
					uni.showModal({
						title:'提示信息',
						content:'请先登录',
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'/pages/views/login/login'
								})
							}
						}
					})
				}
			})
			// uni.navigateTo({
			// 	url:`/pages/views/removeAlarm/removeAlarm?id=${id}`
			// })
		},
		alarmDetailInfoFn(){
			this.$api.alarmDetailInfo({
				alarmId:this.alarmId
			}).then(res => {
				this.monitorDetail = res.data[0]
				
				this.skeletonLoading = false
				
				// console.log('this.monitorDetail.historyCurveData.length',this.monitorDetail.historyCurveData.length)
				if(this.monitorDetail.historyCurveData.length){
					let tempchartData = {
						categories: this.monitorDetail.historyCurveData[0]['times'],
						series: [
							{
								data:this.monitorDetail.historyCurveData[0]['values'],
								name:'甲烷浓度',
								index:0,
							},
							{
								data:this.monitorDetail.historyCurveData[0]['wendu'],
								name:'温度',
								index:1,
							},
						]
					}
					uni.setStorage({
						key:'monitorDetailData',
						data:tempchartData,
					})
				}else{
					uni.removeStorage({
						key:'monitorDetailData'
					})
				}
			})
		},
		enterMonitor(){
			uni.navigateTo({
				url:`/pages/views/monitorCurve/monitorCurve?alarmInspect=${vm.monitorDetail.alarmInspect}`,
			})
		}
	}
};
</script>

<style lang="scss" scoped>

.device_info_row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70rpx;
	text{
		font-size: 28rpx;
		color: #666;
		&:first-child{
			display: block;
			width: 180rpx;
		}
		&:last-child{
			display: block;
			min-width: 200rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: right;
		}
	}
}
.history_alarm_box{
	display: flex;
	border-bottom: 2rpx solid $uni-bg-color-grey;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	&:last-child{
		margin-bottom: 0;
		border-bottom: none;
		padding-bottom: 0;
	}
	image{
		opacity: .65;
		width: 80rpx;
		height: 80rpx;
		flex-shrink: 0;
		margin-right: 23rpx;
	}
	&>view{
		flex: 1;
		
	}
	.tit{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #222;
		font-size: 28rpx;
		display: block;
		width: 90%;
	}
	.subTit{
		display: block;
		color: #999;
	}
	.device_info_row{
		justify-content: flex-start;
		text{
			&:first-child{
				display: block;
				    width: auto;
				    text-align: right;
				    margin-right: 10rpx;
			}
			&:last-child{
		
				text-align: left;
			}
		}
	}
}


.no_data{	
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 20rpx 0;
	color: $uni-text-color-disable;
}
.flex_row{
	display: flex;
	justify-content: flex-start;
	.levelImage{
		width: 80rpx;
		height: 80rpx;
		margin-right: 23rpx;
	}
}
</style>
